<template>
	<!-- 新增提货通知单组件 -->
	<view class="addpoorder">
		<view class="close_btn" @click="close">关闭</view> <!-- 点击关闭当前页面 -->
		<view class="save_btn" @click="save">
			<!-- 点击保存数据-->
			<uni-icons type="plusempty" size="13" color="#fff"></uni-icons>
			保存
		</view>
		<!-- 表单选择列表 -->
		<view class="form_list">
			<view class="date_li">
				<view class="circle">编号：</view>
				<view class="value">{{ FBillNo }}</view>
			</view>

			<view class="date_li">
				<view class="circle">采购方式：</view>
				<picker mode="selector" :range="purchase_picker_arr" @change="purchase_picker_change" value="0">
					<view class="choose" :style="{ color: (purchaseid ? 'black' : '') }">{{ FPOStyle }}</view>
				</picker>
			</view>

			<view class="date_li">
				<view class="circle">采购范围：</view>
				<picker mode="selector" :range="range_picker_arr" @change="range_picker_change" value="0">
					<view class="choose" :style="{ color: (rangeid ? 'black' : '') }">{{ FAreaPS }}</view>
				</picker>
			</view>

			<view class="date_li">
				<view class="circle">供应商：</view>
				<view @click="showDrawer('uniDrawer')" class="choose" :style="{ color: (FSupplyID ? 'black' : '') }">
					{{ supplier }}
				</view>
				<drawer v-on:aiguigu="choice('Supplier', null, $event)" ref="uniDrawer" :text="'Supplier'" :current="current">
				</drawer>
			</view>

			<view class="date_li">
				<view class="circle">有效天数：</view>
				<input placeholder="请输入有效天数" v-model="FValidDate" type="number" />
			</view>

			<view class="date_li">
				<view class="circle">部门：</view>
				<view @click="showDrawer('uniDepartment')" class="choose" :style="{ color: (FDeptID ? 'black' : '') }">
					{{ Department }}
				</view>
				<drawer v-on:aiguigu="choice('Department', null, $event)" ref="uniDepartment" :text="'Department'"
					:current="current">
				</drawer>
			</view>

			<view class="date_li">
				<view class="circle">业务员：</view>
				<view @click="showDrawer('uniEmp')" class="choose" :style="{ color: (FEmpID ? 'black' : '') }">
					{{ Emp }}
				</view>
				<drawer v-on:aiguigu="choice('Emp', null, $event)" ref="uniEmp" :text="'Emp'" :current="current">
				</drawer>
			</view>

			<view class="date_li">
				<view class="circle">币别：</view>
				<picker mode="selector" :range="Currency_picker_arr" @change="Currency_picker_change" value="0">
					<view class="choose" :style="{ color: (FCurrencyID ? 'black' : '') }">{{ Currency }}</view>
				</picker>
			</view>

			<view class="date_li">
				<view class="circle">汇率：</view>
				<input placeholder="请输入汇率" v-model="FExchangeRate" />
			</view>
		</view>
		<!-- 卡片列表 -->
		<view class="card_list clearfix">
			<uni-card v-for="(item, index) in card_arr" :key="index" :title="'序号' + (index + 1)">
				<view class="ul">
					<view class="li">
						<text class="title">物料代码:</text>
						<view class="selector">
							<view @click="showMaterial(index, 'material')" class="choose">{{ item.material_code }}
							</view>
							<drawer v-on:aiguigu="choice('material', index, $event)" ref="uniMaterial" :text="'Material'"
								:current="current"></drawer>
						</view>
					</view>
					<view class="li">
						<text class="title">条形码:</text>
						<input type="number" v-model="item.FSnListID" />
					</view>
					<view class="li">
						<text class="title">物料名称:</text>
						<view class="value">{{ item.material_name || "" }}</view>
					</view>
					<view class="li">
						<text class="title">单位:</text>
						<view class="value">{{ item.measuring || "" }}</view>
					</view>
					<view class="li">
						<text class="title">数量:</text>
						<view class="number_box">
							<!-- 数字选择盒子-->
							<text class="subtract" style="margin-right: 10rpx;" @click="num_subtract(index)">-</text>
							<!-- 减1 -->
							<input class="number" type="number" v-model="item.FQty" />
							<text class="add" style="margin-left: 10rpx;" @click="num_add(index)">+</text> <!-- 加1 -->
						</view>
					</view>
					<view class="li">
						<text class="title">单价:</text>
						<input type="number" v-model="item.FPrice" />
					</view>
					<view class="li">
						<text class="title">含税单价:</text>
						<input type="number" v-model="item.FTaxPrice" />
					</view>
					<!-- <view class="li">
						<text class="title">售价:</text>
						<input type="number" v-model="item.shoujia" />
					</view>
					<view class="li">
						<text class="title">毛利率:</text>
						<input type="number" v-model="item.maolilv" />
					</view> -->
					<view class="li">
						<text class="title">金额:</text>
						<input type="number" v-model="item.FAmount" />
					</view>
					<!-- <view class="li">
						<text class="title">库存:</text>
						<input type="number" v-model="item.kcsl" />
					</view> -->
					<view class="li">
						<text class="title">折扣率:</text>
						<input type="number" v-model="item.FTaxRate" />
					</view>
					<view class="li">
						<text class="title">实际含税价:</text>
						<input type="number" v-model="item.FPriceDiscount" />
					</view>
					<view class="li">
						<text class="title">折扣额:</text>
						<input type="number" v-model="item.FDescount" />
					</view>
					<view class="li">
						<text class="title">当前库存量:</text>
						<input type="number" v-model="item.FOnStockTotalQty" />
					</view>
					<view class="li">
						<text class="title">采购在途量:</text>
						<input type="number" v-model="item.FOnOrderTotalQty" />
					</view>
					<view class="li">
						<text class="title">税率:</text>
						<input type="number" v-model="item.FCess" />
					</view>
					<view class="li">
						<text class="title">日均销量:</text>
						<input type="number" v-model="item.FSaleDayAverageQty" />
					</view>
					<view class="li">
						<text class="title">税额:</text>
						<input type="number" v-model="item.FTaxAmount" />
					</view>
					<view class="li">
						<text class="title">交货日期:</text>
						<view class="selector">
							<uni-datetime-picker type="date" :value="item.FDate" @change="change_date(index, $event)" />
						</view>
					</view>
					<view class="li">
						<text class="title">价税合计:</text>
						<view class="value">{{ item.FAllAmount || "" }}</view>
					</view>
					<view class="li">
						<text class="title">前一周销量:</text>
						<view class="value">{{ item.FSaleWeekTotalQty1 || "" }}</view>
					</view>
					<view class="li">
						<text class="title">前二周销量:</text>
						<view class="value">{{ item.FSaleWeekTotalQty2 || "" }}</view>
					</view>
					<view class="li">
						<text class="title">前三周销周:</text>
						<view class="value">{{ item.FSaleWeekTotalQty3 || "" }}</view>
					</view>
					<view class="li">
						<text class="title">前四周销量:</text>
						<view class="value">{{ item.FSaleWeekTotalQty4 || "" }}</view>
					</view>
					<view class="li">
						<text class="title">关联数量:</text>
						<view class="value">{{ item.FAuxCommitQty || "" }}</view>
					</view>
					<view class="li">
						<text class="title">入库数量:</text>
						<view class="value">{{ item.FStockQty || "" }}</view>
					</view>
					<view class="li">
						<text class="title">开票数量:</text>
						<view class="value">{{ item.FAuxQtyInvoice || "" }}</view>
					</view>
				</view>
				<!-- 移除卡片选项按钮 -->
				<!-- 点击移除对应的卡片-->
				<view class="delete" @click="delete_card(item.current)">
					<icon type="clear" size="24" color="#F52713" />
				</view>
			</uni-card>
			<view class="text">制表机构：{{ user_name }}</view>
			<view class="add_btn" @click="add_card">
				<uni-icons type="plusempty" size="13" color="#fff"></uni-icons>
				追加
			</view>
		</view>
	</view>
</template>

<script>
// 引入uni-ui组件
import {
	uniDatetimePicker,
	uniIcons,
	uniCard
} from '@dcloudio/uni-ui'
import drawer from "../assembly/drawer.vue";

export default {
	data() {
		return {
			user_name: "Admin", //用户名
			data_obj: {}, //数据对象（由serial页面传递过来）
			single: "", // uni-ui的日期组件的当前日期
			FBillNo: 'RIS133547519997', //单据编码
			supplier: "请选择供应商", // 供应商
			FSupplyID: '',
			purchase_picker_arr: ['受托入库', '现购', '赊购'],
			FPOStyle: "请选择", // 选中的科目
			range_picker_arr: ['购销', '调拨'],
			FAreaPS: '请选择采购范围',
			FValidDate: 0,
			FDeptID: '',
			Department: '请选择部门',
			FEmpID: '',
			Emp: '请选择业务员',
			Currency_picker_arr: [],
			FCurrencyID: '',
			Currency: '请选择币别',

			picker_arr: [],
			// total: '',
			current: 1,
			FExchangeRate: 0,


			purchaseid: '',
			rangeid: '',
			supplierid: '',

			card_arr: [ //卡片列表的数组
				{
					current: 1, //序号
					material_code: "请选择", //物料编码
					material_name: "", //物料名称
					measuring: "", //计量单位
					FQty: 0, //数量
					FSnListID: '665689896123',
				},
			],

		}
	},
	components: {
		drawer,
		uniDatetimePicker, //uni-ui的日期组件
		uniIcons, //uni-ui的icon组件
		uniCard, //uni-ui的卡片组件
	},
	computed: {

	},
	mounted() {
		if (!this.detailsid) {
			var coding = 'POORD'
			var num = 6
			this.$Api.getOrder(num, coding).then(res => {
				this.FBillNo = res.data.data
			})
			this.$Api.getCurrency().then(res => {
				this.Currency_picker_arr = res.data.data.arr
				this.Currency_picker_arrs = res.data.data.list
			})
		}
	},
	methods: {
		showDrawer(text) {
			if (text == 'uniDrawer') {
				this.$refs.uniDrawer.showDrawers();
			} else if (text == 'uniDepartment') {
				this.$refs.uniDepartment.showDrawers();
			} else if (text == 'uniEmp') {
				this.$refs.uniEmp.showDrawers();
			}
		},
		// 物料和仓库的抽屉组件的打开事件
		showMaterial(index) {
			this.$refs.uniMaterial[index].showDrawers();
			this.meindex = index
		},
		choice(text, index, data) {
			// console.log(data);
			if (text == 'Supplier') {
				this.supplier = data.FName
				this.FSupplyID = data.FItemID
			} else if (text == 'material') {
				var meindex = this.meindex
				this.card_arr[meindex].material_code = data.FNumber
				this.card_arr[meindex].material_name = data.FName
				this.card_arr[meindex].measuring = data.unit_name
				this.card_arr[meindex].materiel_id = data.FItemID
			} else if (text == 'Department') {
				this.Department = data.FName
				this.FDeptID = data.FItemID
			} else if (text == 'Emp') {
				this.Emp = data.FName
				this.FEmpID = data.FItemID
			}
		},
		// uni-ui日期组件的点击事件
		change_date(index, event) {
			console.log(index, event);
			this.card_arr[index].FDate = event; //event为选中的日期
		},
		purchase_picker_change(e) {
			var value = e.detail.value
			this.FPOStyle = this.purchase_picker_arr[value]
		},
		range_picker_change(e) {
			var value = e.detail.value
			this.FAreaPS = this.range_picker_arr[value]
		},
		Currency_picker_change(e) {
			var value = e.detail.value
			this.Currency = this.Currency_picker_arr[value]
			this.FCurrencyID = this.Currency_picker_arrs[value].FItemID
		},

		// 数字选择器盒子点击减的事件
		num_subtract(index) {
			if (this.card_arr[index].FQty == 0) return //当为0时跳出
			this.card_arr[index].FQty--; //对应的选项递减1
		},
		// 数字选择器盒子点击加的事件
		num_add(index) {
			if (this.card_arr[index].FQty == this.card_arr[index].yuan_nums) return //数字跟原数量一样大就退出
			this.card_arr[index].FQty++ //对应的选项递增1
		},

		// 移除卡片选项点击事件
		delete_card(current) {
			uni.showModal({ //显示确定取消提示框
				title: "确定删除该选项吗",
				showCancel: true,
				success: (res) => {
					if (res.confirm) { //用户点击确定时
						// 删除对应的卡片选项
						this.card_arr.forEach((ele, index) => {
							if (ele.current == current) {
								this.card_arr.splice(index, 1)
							}
						})
					}
				}
			})
		},
		// 添加卡片选项点击事件
		add_card() {
			var current = this.card_arr.length + 1; //获取当前数组的长度，再+1
			var obj = { //添加的对象
				current: current, //序号
				material_code: "请选择",
				FQty: 0,
			}
			this.card_arr.push(obj) //添加到数组中
		},
		// 点击关闭的事件回调
		close() {
			uni.navigateBack({})
		},
		// 点击保存的事件回调
		save() {
			uni.showLoading({
				title: '提交中',
				mask: true
			})
			var data_obj = { //保存的数据对象
				FBillNo: this.FBillNo,
				FValidDate: this.FValidDate,
				FPOStyle: this.FPOStyle,
				FAreaPS: this.FAreaPS,
				FSupplyID: this.FSupplyID,
				FDeptID: this.FDeptID,
				FEmpID: this.FEmpID,
				FCurrencyID: this.FCurrencyID,
				FExchangeRate: this.FExchangeRate,
				card_arr: this.card_arr, //卡片数组
			}
			if (this.detailsid) {
				data_obj.id = parseInt(this.detailsid)
				data_obj.task = 'update'
			} else {
				data_obj.task = 'add'
			}
			this.$Api.addpoorder(data_obj).then(res => {
				console.log(res);
				if (res.data.code == 1) {
					uni.showToast({
						title: res.data.msg,
						icon: 'success'
					})
					setTimeout(() => {
						var pages = getCurrentPages();
						var currPage = pages[pages.length - 1]
						var prePage = pages[pages.length - 2]
						prePage.$vm.currentPage = 1
						prePage.$vm.getlist()
						uni.navigateBack({})
					}, 1000)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'error'
					})
				}
			})
		},


		getdetails(id) {
			//获取编辑详细信息
			var id = id
			this.$Api.getpoorder_details(id).then(res => {
				if (res.data.msg == '获取成功') {
					var array = res.data.data
					this.FPOStyle = array.FPOStyle;
					this.FBillNo = array.FBillNo;
					this.FAreaPS = array.FAreaPS;
					this.supplier = array.supplier;
					this.FValidDate = array.FValidDate;
					this.Department = array.Department;
					this.Emp = array.Emp;
					this.Currency = array.Currency;
					this.FExchangeRate = array.FExchangeRate;
					this.FSupplyID = array.FSupplyID;
					this.FDeptID = array.FDeptID;
					this.FEmpID = array.FEmpID;
					this.FCurrencyID = array.FCurrencyID;
					this.card_arr = array.card_arr
				}
			})
		}
	},
	onLoad(e) {
		uni.$on("getcard_arr", (value) => {
			console.log(value)
			this.card_arr = value
			const newArr = []
			value.forEach(item => {
				if (!newArr.includes(item.rent_code)) {
					newArr.push(item.rent_code)
				}
			})
			// var s = a.toString()
			console.log(newArr.toString());
			this.serial = newArr.toString()
		})
		if (e.id) {
			this.detailsid = e.id
			this.getdetails(e.id)
		}
	},
}
</script>

<style lang="less">
.addpoorder {
	>.title {
		width: 750rpx;
		margin-left: -10rpx;
		padding-left: 30rpx;
		color: #fff;
		font-size: 28rpx;
		line-height: 2;
		background: #2C3E50;
	}

	>.close_btn,
	>.save_btn {
		display: inline-block;
		padding: 16rpx 20rpx;
		margin: 30rpx 0;
		border-radius: 6rpx;
		font-size: 26rpx;
		color: #fff;
	}

	>.close_btn {
		margin-left: 20rpx;
		background: #444c69;

		&:active {
			background: #2C3E50;
		}
	}

	>.save_btn {
		margin-left: 10rpx;
		background: #18bc9c;

		>.uni-icons {
			//uni-ui的icon图标样式
			margin-right: 5rpx;
			font-weight: bolder;
		}

		&:active {
			background: #128F76;
		}
	}

	>.form_list {
		>view {
			padding: 0 20rpx;
		}

		>.date_li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0;
			text-align: right;

			>.circle {
				font-size: 28rpx
			}

			>.value {
				height: 68rpx;
				// padding: 0rpx;
				// border: 1px solid #e5e5e5;
				border-radius: 4px;
				line-height: 68rpx;
				font-size: 30rpx;
			}

			.choose {
				padding: 12rpx 0rpx;
				// border: 1px solid #e5e5e5;
				border-radius: 4px;
				font-size: 32rpx;
				color: #888;
				width: 450rpx;
			}
		}

		>.code_li,
		>.customer_li,
		>.contact_li,
		>.phone_li,
		>.serial_li {
			>.value {
				height: 68rpx;
				padding-left: 20rpx;
				border: 1px solid #e5e5e5;
				border-radius: 4px;
				line-height: 68rpx;
				font-size: 30rpx;
			}

			.choose {
				padding: 12rpx;
				padding-left: 20rpx;
				border: 1px solid #e5e5e5;
				border-radius: 4px;
				font-size: 32rpx;
				color: #888;
			}
		}

		>.note_li {
			>input {
				padding: 12rpx;
				padding-left: 20rpx;
				border: 1px solid #e5e5e5;
				border-radius: 4px;
			}
		}

		>.serial_li {
			>.serial_choose {
				padding: 15rpx 0;
				margin-top: 15rpx;
				border: 1px solid #e5e5e5;
				border-radius: 4px;
				background: #18bc9c;
				text-align: center;
				font-size: 28rpx;
				color: #fff;

				&:active {
					background: #128F76;
				}
			}
		}

		>.customer_li {
			.uni-drawer__content {

				//uni-ui抽屉组件
				scroll-view {
					input {
						border: 1px solid #e5e5e5;
						margin: 20rpx;
						padding-left: 20rpx;
					}

					.text {
						text-align: center;
						line-height: 64rpx;
						font-size: 28rpx;

						&:active {
							background-color: #ddd;
						}
					}

					.uni-pagination {
						//uni-ui分页器组件
						margin-top: 40rpx;
					}
				}

			}
		}
	}

	>.card_list {
		padding: 0 10rpx;
		padding-top: 30rpx;

		>.uni-card {
			//uni-ui卡片组件的类名
			margin: 30rpx 10rpx !important;
			position: relative;

			.ul {
				>.li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 0;

					>input {
						text-align: center;
					}

					>.value {
						height: 68rpx;
						width: 68%;
						text-align: center;
						padding-left: 20rpx;
						border: 1px solid #e5e5e5;
						border-radius: 4px;
						line-height: 68rpx;
					}

					>.number_box {
						//数字选择盒子
						// margin-right: 100rpx;
						font-size: 30rpx;
						display: flex;
						width: 72%;
						justify-content: center;

						>text {
							padding: 8rpx 20rpx;
							border: 1px solid #ccc;
							// margin: 0 10rpx;
							background: #F5F5F5;
						}

						>.number {
							width: 166px;
							padding: 8rpx 0;
							border: 1px solid #ccc;
							text-align: center;
						}
					}

					>.selector {
						width: 72%;
						// margin-left: 20rpx;

						// >uni-picker{
						// 	border:1px solid #e5e5e5;
						input {
							border: 1px solid #e5e5e5;
							margin: 20rpx;
							padding-left: 20rpx;
						}

						.choose {
							border: 1px solid #e5e5e5;
							padding: 10rpx 0;
							border-radius: 4px;
							text-align: center;
						}

						// }
					}

					>input {
						// margin-left: 20rpx;
						padding: 12rpx;
						padding-left: 20rpx;
						border: 1px solid #e5e5e5;
						border-radius: 4px;
						width: 66.5%;
						// padding-left: 10px;
					}
				}
			}

			.delete {
				position: absolute;
				top: 8rpx;
				right: 18rpx;
			}
		}

		>.add_btn {
			float: right;
			padding: 16rpx 140rpx;
			border-radius: 6rpx;
			font-size: 26rpx;
			color: #fff;
			background: #18bc9c;

			>.uni-icons {
				//uni-ui的icon图标样式
				margin-right: 5rpx;
				font-weight: bolder;
			}

			&:active {
				background: #128F76;
			}
		}

		>.text {
			float: left;
			margin: 10rpx;
			font-size: 30rpx;
		}
	}
}
</style>
